import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { request } from "../../utils";
import { HomeListItem } from "../../store/home/homeSlice";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { ActionBar } from "react-vant";
import { Sku } from "../../components";
import { useDispatch } from "react-redux";
import { addCar } from '../../store/car/carSlice'
const Index: React.FC = () => {
  const { id } = useParams();
  const [item, setItem] = useState<HomeListItem>();
  const [show, setShow] = useState(false)
  const dispatch = useDispatch()
  const handleAddCar = (params) => {
    setShow(false)
    dispatch(addCar(params))
  }
  useEffect(() => {
    (async () => {
      const resp = await request.get("/api/detail", { params: { id } });
      setItem(resp.data.data);
    })();
  }, []);

  if (!item) {
    return <div>数据加载zhong ...</div>;
  }
  return (
    <div>
      <div>
        <img src={item.url} alt="" width="100%" />
        <h3>{item.title}</h3>
        <p>{item.desc}</p>
      </div>
      <Sku
        id={item.id}
        show={show}
				url={item.url}
				desc={item.desc}
				maxCount={item.maxCount}
				price={item.price}
        colors={item.colors}
        sizes={item.sizes}
        addCar={ handleAddCar }
        title={ item.title }
			></Sku>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log("chat click")}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text="购物车"
          onClick={() => console.log("cart click")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log("shop click")}
        />
        <ActionBar.Button
          type="danger"
          text="立即购买"
          onClick={() => setShow(true)}
        />
      </ActionBar>
    </div>
  );
};
export default Index;
